<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>基于知识图谱的杂豆病虫害问答系统</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <!-- plugins:css -->
  <link rel="stylesheet" href="../static/vendors/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../static/vendors/base/vendor.bundle.base.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../static/css/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../static/images/豆荚.png" />
  <style>

    .form-control:focus{
      border-color: #71c016 !important;
    }
    .form-check-success.form-check label input[type="checkbox"] + .input-helper:before{
      border-color: #71c016 !important;
    }
    .content-wrapper{
      background:url(../static/images/background.png)
    }
  </style>
</head>

<body>
  <div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper">
      <div class="content-wrapper d-flex align-items-center auth px-0">
        <div class="row w-100 mx-0" >
          <div class="col-lg-4 mx-auto" >
            <div class="alert alert-danger alert-dismissible fade " role="alert" style="display:none" id="danger-tip">
              <span id="danger-tip-text">You should check in on some of those fields below.</span>
            </div>
            <div class="alert alert-success alert-dismissible fade " role="alert" style="display:none" id="success-tip">
              <span id="success-tip-text">You should check in on some of those fields below.</span>
            </div>
            <div class="auth-form-light text-left py-5 px-4 px-sm-5" style="border-radius:10px;box-shadow:3px 3px 2px #E1F2CE;">
              <div class="brand-logo">
                <img src="../static/images/豆荚.png" alt="logo" style="width:35px;height:35px;vertical-align:middle">
                <h4 style="display:inline-block;vertical-align:middle;margin-left:10px;font-size:21px">基于知识图谱的杂豆病虫害问答系统</h4>
              </div>
              <form class="pt-3">
                <div class="form-group">
                  <input type="text" class="form-control form-control-lg" id="username" placeholder="用户名" data-toggle="popover" data-placement="right" data-content="Right popover">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control form-control-lg" id="password1" placeholder="密码">
                </div>
                <div class="form-group">
                  <input type="password" class="form-control form-control-lg" id="password2" placeholder="再次输入密码">
                </div>
                <div class="mt-3">
                  <a class="btn btn-block btn-success btn-lg font-weight-medium auth-form-btn" id="registerBtn" >注册</a>
                </div>
                <div class="text-center mt-4 font-weight-light">
                  已有账号? <a href="/lg" class="text-success">立即登录</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../static/vendors/base/vendor.bundle.base.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="../static/js/off-canvas.js"></script>
  <script src="../static/js/hoverable-collapse.js"></script>
  <script src="../static/js/template.js"></script>
  <script>
    $(function(){
      $('#username').val('');
    });
    $('#registerBtn').click(function(){
      var username=$('#username').val();
      var password1=$('#password1').val();
      var password2=$('#password2').val();
      var type=''
      var text=''
      if(username==''){
        type='danger';
        text='请输入用户名！';
      }
      else if(password1==''){
        type='danger';
        text='请输入密码！';
      }
      else if(password2==''){
        type='danger';
        text='请再次输入密码！';
      }
      else if(password1.length>8){
        type='danger';
        text='请输入8位以内的密码！';
      }
      else if(password1!=password2){
        type='danger';
        text='两次密码输入不一致！';
      }else{
        $.ajax({
          type:"POST",
          url:"/register",
          data:{'username':username,'password':password1},
          success:function(re){
            re=JSON.parse(re);
            if(re.msg==1){
              $('#danger-tip').css('display','none');
              $('#danger-tip').removeClass('show');
              type='success';
              text='注册成功！';
            }
            else if(re.msg==0){
              type='danger';
              text='该用户已存在！';
            }
            $('#'+type+'-tip').css('display','block');
            $('#'+type+'-tip').addClass('show');
            $('#'+type+'-tip-text').html(text);
            setTimeout(function (){
              $('#'+type+'-tip').css('display','none');
              $('#'+type+'-tip').removeClass('show');
            }, 3000);
          }
        })
      }
      $('#'+type+'-tip').css('display','block');
      $('#'+type+'-tip').addClass('show');
      $('#'+type+'-tip-text').html(text);
      setTimeout(function (){
        $('#'+type+'-tip').css('display','none');
        $('#'+type+'-tip').removeClass('show');
      }, 3000);
    })
  </script>
  <!-- endinject -->
</body>

</html>
